<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="INDEX, FOLLOW">
<meta http-equiv=keywords content="CodeThatXPBar, script, bar, XP bar, javascript, javascript XP bar, free, free javascript XP bar, cross-browser, html, xml, css, control panel, Windows XP, explorer">
<meta http-equiv=description content="CodeThatXPBar is a navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language=javascript src="own.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<table width=768 border=0 cellpadding=0 cellspacing=0>
<tr>
<td><div style="position:absolute;left:320;top:154;z-index:1"><img src="img/mm.gif" width=2 height=10></div><img src="img/s.gif" width=1 height=2></td>
</tr><tr>
<td class=ct13><table width=768 height=42 border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td><img src="img/s.gif" width=20 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>User Manual <br><a href="../index.html" class="ca9"><font class="cf6">S</font>amples</a></font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca9 href="index.html"><font class=cf6>In</font>troduction</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_style.html"><font class=cf6>S</font>tyle customize</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_pos.html"><font class=cf6>B</font>ar position</a>&nbsp; &nbsp;
	<a class=ca9 href="bar_act.html"><font class=cf6>It</font>ems' actions</a></nobr></p>
	<p class=cp18><nobr><a class=ca9 href="bar_html.html"><font class=cf6>H</font>TML code as items' text</a>&nbsp; &nbsp;
	
	<a class=ca9 href="bar_db.html"><font class=cf6>X</font>PBar from the database</a></nobr></p>
	
	<p class=cp18><nobr><a class=ca9 href="bar_beh.html"><font class=cf6>C</font>hange XPBar Behaviour</a>&nbsp; &nbsp;
	<a class=ca9 href="standard_vs_pro.html?h=xpbar#xpbar"><font class=cf6>S</font>tandard vs PRO</a></nobr></p></td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><font class=ca8>On-line Builder</font></nobr></p></td>
	<td width=13%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle>
	
	<p class=cp18><a class=ca9 href="http://codethat.com/xpbar/ctxpbarpro_builder.html">PRO</a></p>

	
	<p class=cp18><a class=ca9 href="../Builder/ctxpbarstd_builder.html">STD</a></p>
	
	</td>
	<td width=23%><img src="img/s.gif" width=1 height=1></td>
	<td valign=middle><p class=cp18><nobr><a class=ca8 href="userguide.html"><font class=cf7>1</font>23Guide</a>&nbsp; &nbsp;

	
	<p class=cp18><nobr><a class=ca8 href="http://codethat.com/sales.html"><font class=cf7>O</font>rder PRO Now</a>&nbsp; &nbsp;

	
	<a class=ca8 href="faq.html"><font class=cf7>F</font>AQ</a></nobr></p></td>
	<td width=28%><img src="img/s.gif" width=1 height=1></td>
	</tr>
</table></td>
</tr><tr>
<td><img src="img/s.gif" width=1 height=2></td>
</tr>
<tr>
<td class=ct12><table width=768 height=30 border=0 cellpadding=0 cellspacing=0>
	<tr><td valign=middle><h1 class=cp9>CODETHATXPBAR USER GUIDE</h1></td></tr>
</table></td>
</tr><tr>
<td>

<p class=cp10>The following "9 steps" instruction will guide you step by step through the CodeThatXPBar configuration process.</p>

<div class=cd1><img src="img/guide1.gif" width=64 height=64 alt=1></div>
<h1 class=cp10><font class=cf5>Download package with CodeThatXPBar script and unarchive it.</font></h1>

<p class=cp10>Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.</p>
<p class=cp10>Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.</p>
<p class=cp10><img src="img/pro.gif" width=24 height=11>&nbsp;Read <a class=ca5 href="standard_vs_pro.html?h=xpbar#xpbar">Standard vs PRO</a> to know the differences between CodeThatXPBar Standard and PRO.</p>

<div class=cd1><img src="img/guide2.gif" width=64 height=64 alt=2></div>
<h1 class=cp10><font class=cf5>Create the basic HTML file.</font></h1>
<p class=cp10>Your file may look as following:</p>

<pre class=cc1>
<font class=cc4>&lt;</font><font class=cc3>HTML</font><font class=cc4>&gt;
&lt;</font><font class=cc3>HEAD</font><font class=cc4>&gt;
&lt;</font><font class=cc3>link href="common.css" rel="stylesheet" type="text/css"</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatsdk.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatxpbarstd.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc5>/</font><font class=cc3>HEAD</font><font class=cc4>&gt;
&lt;</font><font class=cc3>BODY</font><font class=cc4>&gt;
&lt;</font><font class=cc3>p</font><font class=cc4>&gt;</font>&amp;nbsp;HELLO WORD!
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>BODY</font><font class=cc4>&gt;
&lt;</font><font class=cc5>/</font><font class=cc3>HTML</font><font class=cc4>&gt;</font>
</pre>

<div class=cd1><img src="img/guide3.gif" width=64 height=64 alt=3></div>
<h1 class=cp10><font class=cf5>Now lets create your first CodeThatXPBar.</font></h1>
<p class=cp10>For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.</p>
<p class=cp10>To describe new XPBar create an object with following structure:</p>

<pre class=cc1>
<font class=cc4>&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3><font class=cc5>var</font> BarDef <font class=cc2>=</font> <font class=cc7>{</font></font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"defaction"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font> <font class=cc8>]</font>
<font class=cc7>}</font><font class=cc2>;</font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;</font>
</pre>

<div class=cd1><img src="img/guide4.gif" width=64 height=64 alt=4></div>
<h1 class=cp10><font class=cf5>Now we describe XPBar style, item over style, position and scrollers' style:</font></h1>

<pre class=cc1>
<font class=cc3><font class=cc5>var</font> BarDef <font class=cc2>=</font> <font class=cc7>{</font></font>
	<font class=cc6>"style"</font>	 <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"css"</font>	 <font class=cc2>:</font> <font class=cc6>"bartitle"</font><font class=cc2>,</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#6C86DC"</font><font class=cc2>,</font>
		<font class=cc6>"size"</font>	 <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>160</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
		<font class=cc6>"shadow"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#C0C0C0"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#000000"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgspace"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font>
		<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_up.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>10</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"fixheight"</font> <font class=cc2>:</font> <font class=cc4>200</font><font class=cc2>,</font>
		<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>25</font><font class=cc2>,</font> <font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font> <font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font>
			<font class=cc6>"up"</font> <font class=cc2>:</font> <font class=cc6>"img/scroller_up.gif"</font><font class=cc2>,</font>
			<font class=cc6>"down"</font> <font class=cc2>:</font> <font class=cc6>"img/scroller_down.gif"</font><font class=cc2>,</font>
			<font class=cc6>"step"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"time"</font> <font class=cc2>:</font> <font class=cc4>30</font><font class=cc2>,</font> <font class=cc6>"len"</font> <font class=cc2>:</font> <font class=cc4>60</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"css"</font> <font class=cc2>:</font> <font class=cc6>"bartitle"</font><font class=cc2>,</font>
		<font class=cc6>"size"</font>	 <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>160</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
		<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down_over.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_up_over.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#265BCC"</font><font class=cc2>,</font> <font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"absolute"</font> <font class=cc2>:</font> <font class=cc4>true</font><font class=cc2>,</font> <font class=cc6>"pos"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>10</font><font class=cc2>,</font> <font class=cc4>10</font><font class=cc8>]</font>
	<font class=cc7>}</font>
<font class=cc7>}</font>
</pre>

<p class=cp10><font class=cf1>Hint</font> - if parameters description isn't clearly understanding please have a look to <a class=ca5 href="index.html">CodeThatXPBar User Manual</a></p>

<div class=cd1><img src="img/guide5.gif" width=64 height=64 alt=5></div>
<h1 class=cp10><font class=cf5>To add new items to XPBar use the following structure:</font></h1>

<pre class=cc1>
<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>" "</font><font class=cc2>,</font> 	 // text to be written inside
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> 	 // item style in normal state
	<font class=cc6>"styleover"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> // item style in "mouse over" state
	<font class=cc6>"styleon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> // for bool items specifies the style when in "on" state
	<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font> 	 // submenu
	<font class=cc6>"action"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"type"</font> <font class=cc2>:</font> <font class=cc6>" "</font>	 // special item type ("bool"/"separator"),
	// for hierarchical menu only
<font class=cc7>}</font> <font class=cc8>]</font>
</pre>

<p class=cp10>For our example items's definition looks like this:</p>

<pre class=cc1>
<font class=cc6>"items"</font> <font class=cc2>:</font>
<font class=cc8>[</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Folders"</font><font class=cc2>,</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font>
<font class=cc7>}</font><font class=cc2>,</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Other Places"</font><font class=cc2>,</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font>
<font class=cc7>}</font><font class=cc2>,</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Details"</font><font class=cc2>,</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font>
<font class=cc7>}</font> <font class=cc8>]</font>
</pre>

<div class=cd1><img src="img/guide6.gif" width=64 height=64 alt=6></div>
<h1 class=cp10><font class=cf5>Now lets try to open our HTML file in the browser:</font></h1>
<p class=cp22><img src="img/ex.gif" alt="CodeThatXPBar XP style">

<h1 class=cp10><font class=cf5>So we're further extending our js file by adding the submenu to the existing item.</font></h1>
<p class=cp10>It is done by adding the code like this:</p>

<pre class=cc1>
<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Folders"</font><font class=cc2>,</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font><font class=cc2>,</font>
			<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
			<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
			<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>2</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
			<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
		<font class=cc7>{</font>
			<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Search"</font><font class=cc2>,</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font>
			<font class=cc7>{</font>
				<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/folder_search.gif"</font><font class=cc2>,</font>
					<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc7>{</font>
			<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Options"</font><font class=cc2>,</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font>
			<font class=cc7>{</font>
				<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/folder_options.gif"</font><font class=cc2>,</font>
					<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc7>{</font>
			<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Download"</font><font class=cc2>,</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font>
			<font class=cc7>{</font>
				<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/folder_download.gif"</font><font class=cc2>,</font>
					<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font> <font class=cc8>]</font>
	<font class=cc7>}</font>
<font class=cc7>}</font><font class=cc2>,</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Other Places"</font><font class=cc2>,</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font><font class=cc2>,</font>
			<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
			<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
			<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>2</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
			<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
		<font class=cc7>{</font>
			<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"My Computer"</font><font class=cc2>,</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font>
			<font class=cc7>{</font>
				<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/computer.gif"</font><font class=cc2>,</font>
					<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc7>{</font>
			<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Printer"</font><font class=cc2>,</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font>
			<font class=cc7>{</font>
				<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/print.gif"</font><font class=cc2>,</font>
					<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font> <font class=cc8>]</font>
	<font class=cc7>}</font>
<font class=cc7>}</font><font class=cc2>,</font>
<font class=cc7>{</font>
	<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Details"</font><font class=cc2>,</font>
	<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>50</font><font class=cc8>]</font><font class=cc2>,</font>
			<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
			<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
			<font class=cc7>}</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
		<font class=cc7>{</font>
			<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"&lt;p&gt;&lt;b&gt;Copyright&lt;/b&gt;&lt;br&gt;
			&lt;a href='http://www.codethat.com'&gt;
			www.CodeThat.com&lt;/a&gt;"</font>
		<font class=cc7>}</font> <font class=cc8>]</font>
	<font class=cc7>}</font>
<font class=cc7>}</font> <font class=cc8>]</font>
</pre>

<div class=cd1><img src="img/guide7.gif" width=64 height=64 alt=7></div>
<h1 class=cp10><font class=cf5>So... A complete code for this example you can see here:</font></h1>

<pre class=cc1>
<font class=cc4>&lt;</font><font class=cc3>HEAD</font><font class=cc4>&gt;
&lt;</font><font class=cc3>link href="common_codethat.css" rel="stylesheet" type="text/css"</font><font class=cc4>&gt;

&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatsdk.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatxpbarpro.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3><font class=cc5>var</font> BarDef <font class=cc2>=</font> <font class=cc7>{</font></font>
	<font class=cc6>"style"</font>	 <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"css"</font>	 <font class=cc2>:</font> <font class=cc6>"bartitle"</font><font class=cc2>,</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#6C86DC"</font><font class=cc2>,</font>
		<font class=cc6>"size"</font>	 <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>160</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
		<font class=cc6>"shadow"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#C0C0C0"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#000000"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgspace"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font>
		<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_up.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>10</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"fixheight"</font> <font class=cc2>:</font> <font class=cc4>200</font><font class=cc2>,</font>
		<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>25</font><font class=cc2>,</font> <font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font> <font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font>
			<font class=cc6>"up"</font> <font class=cc2>:</font> <font class=cc6>"img/scroller_up.gif"</font><font class=cc2>,</font>
			<font class=cc6>"down"</font> <font class=cc2>:</font> <font class=cc6>"img/scroller_down.gif"</font><font class=cc2>,</font>
			<font class=cc6>"step"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"time"</font> <font class=cc2>:</font> <font class=cc4>30</font><font class=cc2>,</font> <font class=cc6>"len"</font> <font class=cc2>:</font> <font class=cc4>60</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"css"</font> <font class=cc2>:</font> <font class=cc6>"bartitle"</font><font class=cc2>,</font>
		<font class=cc6>"size"</font>	 <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>160</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
		<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down_over.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_up_over.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#265BCC"</font><font class=cc2>,</font> <font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"absolute"</font> <font class=cc2>:</font> <font class=cc4>true</font><font class=cc2>,</font> <font class=cc6>"pos"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>10</font><font class=cc2>,</font> <font class=cc4>10</font><font class=cc8>]</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Folders"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>2</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Search"</font><font class=cc2>,</font>
				<font class=cc6>"style"</font> <font class=cc2>:</font>
				<font class=cc7>{</font>
					<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
						<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/folder_search.gif"</font><font class=cc2>,</font>
						<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
					<font class=cc7>}</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Options"</font><font class=cc2>,</font>
				<font class=cc6>"style"</font> <font class=cc2>:</font>
				<font class=cc7>{</font>
					<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
						<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/folder_options.gif"</font><font class=cc2>,</font>
						<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
					<font class=cc7>}</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Download"</font><font class=cc2>,</font>
				<font class=cc6>"style"</font> <font class=cc2>:</font>
				<font class=cc7>{</font>
					<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
						<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/folder_download.gif"</font><font class=cc2>,</font>
						<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
					<font class=cc7>}</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Other Places"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>2</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>22</font><font class=cc8>]</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"My Computer"</font><font class=cc2>,</font>
				<font class=cc6>"style"</font> <font class=cc2>:</font>
				<font class=cc7>{</font>
					<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
						<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/computer.gif"</font><font class=cc2>,</font>
						<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
					<font class=cc7>}</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Printer"</font><font class=cc2>,</font>
				<font class=cc6>"style"</font> <font class=cc2>:</font>
				<font class=cc7>{</font>
					<font class=cc6>"imgitem"</font> <font class=cc2>:</font> <font class=cc7>{</font>
						<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/print.gif"</font><font class=cc2>,</font>
						<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>16</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>16</font>
					<font class=cc7>}</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Details"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg_big.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>150</font><font class=cc2>,</font> <font class=cc4>50</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"&lt;p&gt;&lt;b&gt;Copyright&lt;/b&gt;&lt;br&gt;
				&lt;a href='http://www.codethat.com'&gt;
				www.CodeThat.com&lt;/a&gt;"</font>
			<font class=cc3><font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font> <font class=cc8>]</font>
<font class=cc7>}</font><font class=cc2>;</font>
<font class=cc5>var</font> bar1 <font class=cc2>=</font> <font class=cc5>new</font> CXPBar<font class=cc2>(</font>BarDef<font class=cc2>,</font></font> <font class=cc6>'bar1'</font><font class=cc2>);</font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;

&lt;</font><font class=cc5>/</font><font class=cc3>head</font><font class=cc4>&gt;

&lt;</font><font class=cc3>body bgcolor="#ffffff"</font><font class=cc4>&gt;

&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3>bar1<font class=cc2>.</font>create<font class=cc2>();</font>
bar1<font class=cc2>.</font>run<font class=cc2>();</font></font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;

&lt;</font><font class=cc5>/</font><font class=cc3>body</font><font class=cc4>&gt;
&lt;</font><font class=cc5>/</font><font class=cc3>html</font><font class=cc4>&gt;</font>
</pre>

<div class=cd1><img src="img/guide8.gif" width=64 height=64 alt=8></div>
<h1 class=cp10><font class=cf5>If you prefer to keep the XPBar at the separate file you should paste XPBar definition to *.js file. Your *.html file will look like the:</font></h1>

<pre class=cc1>
<font class=cc4>&lt;</font><font class=cc3>html</font><font class=cc4>&gt;
&lt;</font><font class=cc3>head</font><font class=cc4>&gt;
&lt;</font><font class=cc3>title</font><font class=cc4>&gt;</font>Test<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>title</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatsdk.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2" src="../Scripts/codethatxpbarpro.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2" src="bar1.js"</font><font class=cc4>&gt;</font><font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3><font class=cc5>var</font> bar1 <font class=cc2>=</font> <font class=cc5>new</font> CXPBar<font class=cc2>(</font>MenuDef<font class=cc2>,</font></font> <font class=cc6>'bar1'</font><font class=cc2>);</font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc3>style type=text/css</font><font class=cc4>&gt;</font>
.box { 
	font-size:14px;
}
.boxover { 
	font-size:15px;
}
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>style</font><font class=cc4>&gt;
&lt;</font><font class=cc5>/</font><font class=cc3>head</font><font class=cc4>&gt;
&lt;</font><font class=cc3>body</font><font class=cc4>&gt;
&lt;</font><font class=cc3>br</font><font class=cc4>&gt;
&lt;</font><font class=cc3>br</font><font class=cc4>&gt;
&lt;</font><font class=cc3>br</font><font class=cc4>&gt;
&lt;</font><font class=cc3>br</font><font class=cc4>&gt;
&lt;</font><font class=cc3>script language="javascript1.2"</font><font class=cc4>&gt;
&lt;!--</font>
<font class=cc3>bar1<font class=cc2>.</font>create<font class=cc2>();</font>
bar1<font class=cc2>.</font>run<font class=cc2>();</font></font> 
//-->
<font class=cc4>&lt;</font><font class=cc5>/</font><font class=cc3>script</font><font class=cc4>&gt;
&lt;</font><font class=cc5>/</font><font class=cc3>body</font><font class=cc4>&gt;
&lt;</font><font class=cc5>/</font><font class=cc3>html</font><font class=cc4>&gt;</font>
</pre>

<h3 class=cp10><font class=cf1>Hint</font> - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)</h3>

<div class=cd1><img src="img/guide9.gif" width=64 height=64 alt=9></div>
<h1 class=cp10><font class=cf5>Congratulations! You have just created your first CodeThatXPBar enhanced web page.</font></h1>
<p class=cp10>To make your life easier we do plan to supply you with on and off line XPBar builders in the nearest time.</p>
</td>
</tr><tr>
<td><table width=100% border=0 cellpadding=0 cellspacing=0>
	<tr>
	<td valign=top><p class=cp10><a href="img_ex.html" onclick="return openWin(800,550,'img_ex.html')" target=_blank><img src="img/explorerXP.gif" width=174 height=203 border=0></a></p></td>
	<td valign=top><p class=cp10><a class=ca5 href="img_ex.html" onclick="return openWin(800,550,'img_ex.html')" target=_blank>Try an Example&nbsp;&gt;&gt;</a></p></td>
	</td>
	</tr>
</table></td>
</tr>
<tr>
<td><p class=cp8>&copy; <a class=ca2 href="">CodeThat.com</a>, 2003-2005<br>
Design by <a class=ca2 href="http://www.xt-labs.com">XTLabs, Inc</a>.</p></td>
</tr>
</table></body></html>